<template>
  <div id="login">
    <el-row>
      <el-col :span="8" :offset="8">
        <div class="logo">
          <img src="@/components/login/img/logo.png" alt>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" :offset="8">
        <div class="content">
          <h2>用户登录</h2>
          <div class="text">
            <el-form ref="info" :model="info" label-width="50px">
              <el-form-item label="账号">
                <el-input type="text" v-model="info.name" placeholder="请输入系统登录账号"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input type="password" v-model="info.password" placeholder="请输入密码"></el-input>
              </el-form-item>
            </el-form>
            <el-button
              class="el_long"
              type="primary"
              :loading="loading"
              @click="login"
            >{{loading?'登 录 中':'登 录'}}</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="footer">
        Copyright2008-2018 版权所有
        <a href="javascript:void(0);">泛康睡眠医学中心</a>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      info: {
        username: "",
        password: ""
      },
      loading: false
    };
  },
  methods: {
    login() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$router.push({ name: "home" });
      }, 2000);
    }
  }
};
</script>

<style scoped>
#login {
  max-width: 1366px;
  margin: 0 auto;
}
.logo {
  width: 100%;
  height: auto;
  text-align: center;
  padding: 50px 0;
  margin-top: 50px;
}

.logo img {
  width: 70%;
}

.content {
  width: 100%;
  height: auto;
  background: #ffffff;
  padding: 20px;
  -webkit-box-shadow: 5px 5px 10px #dbdbdb;
  -moz-box-shadow: 5px 5px 10px #dbdbdb;
  box-shadow: 5px 5px 10px #dbdbdb;
}

.content h2 {
  font-size: 16px;
  border-bottom: 1px solid #e4e4e4;
  margin: 0 auto;
  line-height: 3;
  color: #006835;
}

.text {
  padding: 20px;
}

.footer {
  text-align: center;
  font-size: 14px;
  margin-top: 50px;
  color: #999999;
}

.footer a {
  color: #006835;
  margin-left: 20px;
}
</style>
